<template>
  <v-col class="px-0">
    <v-card flat class="pa-0">
      <v-card-actions class="pa-0">
        <v-list-item>
          <v-list-item-content class="pa-0">
            <v-list-item-title class="text-button font-weight-bold"
              >关注的话题</v-list-item-title
            >
          </v-list-item-content>
          <v-row align="center" justify="end" class="blue--text text-button">
            <span class=" ">全部</span>
            <v-icon class="blue--text mr-1 text-button">
              mdi-chevron-right
            </v-icon>
          </v-row>
        </v-list-item>
      </v-card-actions>
      <v-divider class="item_divider"></v-divider>
      <v-list subheader>
        <v-list-item v-for="chat in recent" :key="chat.title">
          <v-list-item-avatar rounded>
            <v-img :src="chat.avatar"></v-img>
          </v-list-item-avatar>

          <v-list-item-content class="pa-0">
            <v-card-title class="pa-0 mb-0 text-subtitle-1 font-weight-bold">
              一图胜千言
            </v-card-title>
            <v-spacer></v-spacer>
            <v-card-subtitle class="pa-0 text-caption"
              >7059 关注 · 6630 沸点</v-card-subtitle
            >
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>
  </v-col>
</template>

<script>
export default {
  data: () => ({
    recent: [
      {
        active: true,
        avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
        title: 'Jason Oner',
      },
      {
        active: true,
        avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
        title: 'Mike Carlson',
      },
      {
        avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
        title: 'Cindy Baker',
      },
      {
        avatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
        title: 'Ali Connors',
      },
    ],
  }),
}
</script>

<style></style>
